//获取操作对象
var body1=document.body
var qx = document.getElementsByName('quanxuan')[0]
var xuans = document.getElementsByName('xuanzk')
var content=document.querySelector(".content")
var dianpu=document.querySelector(".dianpu")
var hj=dianpu.querySelector('.right')
var footer=document.querySelector('.footer')
// var section=document.getElementsByTagName('section')
var imgL=document.getElementsByClassName('imgL')
var imgR=document.getElementsByClassName('imgR')
var boxs=document.getElementsByClassName('box')


body1.onclick=function(e){
    //对象兼容
    var e = e || window.event
    //目标兼容
    var target = e.target || e.srcElement
    //判断当前点击的是否为全选
    if(target.name=='quanxuan'){
        //遍历所有的选择框对象
        for(var i=0;i<xuans.length;i++){
            //判断当前全选框是否被选中
            if(target.checked){
                xuans[i].checked=true
            }else{
                xuans[i].checked=false
            }
        }
    }
    //判断当前点击的是否为选择框
    if(target.name=='xuanzk'){
        xzk()
    }
    //判断当前点击的是否为+按钮
    if(target.innerHTML=="+"){
        //获取他的上一个兄弟节点的数量
        var n=target.previousElementSibling.innerHTML
        n++
        //重新给他赋值
        target.previousElementSibling.innerHTML=n
        //获取当前元素的ul对象
        var ul=target.parentNode.parentNode
        //获取单价价格
        var price= ul.children[2].lastElementChild.innerHTML
        //计算金额
        var jine=n*price
        //重新给金额赋值
        ul.children[4].lastElementChild.innerHTML=jine.toFixed(2)
        dianpuheji()
    }
    //判断当前点击的是否-按钮
    if(target.innerHTML=="-"){
        //获取他的上一个兄弟节点的数量
        var n=target.nextElementSibling.innerHTML
        if(n<=1){
            n=1
        }else{
            n--
        }
        //重新给他赋值
        target.nextElementSibling.innerHTML=n
        //获取当前元素的ul对象
        var ul=target.parentNode.parentNode
        //获取单价价格
        var price= ul.children[2].lastElementChild.innerHTML
        //计算金额
        var jine=n*price
        //重新给金额赋值
        ul.children[4].lastElementChild.innerHTML=jine.toFixed(2)
        dianpuheji()
    }
    //判断是否点击的是删除按钮
    if(target.innerHTML=="删除"){
        //给一个确认框
        if(confirm("亲，确认要删除该商品吗")){
            target.parentNode.parentNode.remove()
        }
        dianpuheji()
        zongji()
    }
    //判断点击的是否是全删按钮
    if(target.innerHTML=="批量删除"){
        //遍历每个选择框对象
        for(var i=xuans.length-1;i>=0;i--){
            //判断当前商品是否被选中
            if(xuans[i].checked){
                xuans[i].parentNode.parentNode.remove()
            }
        }
        dianpuheji()
        xzk()
    }
    //判断当前点击的是否是添加标签
    if(target.innerHTML=="添加到购物车"){
        //获取当前点击添加商品的内容
        var src1=target.previousElementSibling.getAttribute('src')
        var p1=target.parentNode.nextElementSibling.innerHTML
        var span1=target.parentNode.nextElementSibling.nextElementSibling.lastElementChild.innerHTML
        console.log(span1);
        //创建ul节点
        var newUl=document.createElement("ul")
        //给ul添加内容
        newUl.innerHTML=`
                <li>
                    <input type="checkbox" name="xuanzk">
                </li>
                <li>
                    <div class="box">
                        <img class="img6" src="${src1}" alt="">
                        <p>${p1}</p>
                    </div>
                </li>
                <li>￥<span>${span1}</span></li>
                <li>
                    <button>-</button>
                    <button>1</button>
                    <button>+</button>
                </li>
                <li>￥<span>${span1}</span></li>
                <li>
                    <h2>移入收藏</h2>
                    <h2>删除</h2>
                </li>
        `
        //把当前节点追加到content对象中
        content.appendChild(newUl)
        xzk()
        
    }
    dianpuheji()
    zongji()
    //右边按钮
    if(target.className=='imgR'){
        console.log(222);
        right.style.display='block'
        left.style.display='none'
    }
    //左边按钮
    if(target.className=="imgL"){
        right.style.display='none'
        left.style.display='block'
    }
}

//封装选择框功能函数
function xzk(){
    var a=0 //选中框被选中框的次数
    //遍历所有的选中框对象
    for(var i=0;i<xuans.length;i++){
        //判断当前选中框是否被选中
        if(xuans[i].checked){
            a++
        }
    }
    //判断当前被选中的次数是否等于选中框的长度
    if(a==xuans.length && xuans.length!=0){
        qx.checked=true
    }else{
        qx.checked=false
    }
    var lis=footer.getElementsByTagName('li')
    lis[2].lastElementChild.innerHTML=a
}
//封装店铺合计功能函数
function dianpuheji() {
    var sum=0;
    //获取所有商品
    var uls=content.getElementsByTagName('ul')
    //遍历每个商品对象
    for(var i=0;i<uls.length;i++){
        //获取当前商品的金额
        var jine=uls[i].children[4].lastElementChild.innerHTML
        //累加
        sum+=parseFloat(jine)
    }
    //把计算结果赋值给店铺合计
    hj.lastElementChild.innerHTML=sum.toFixed(2)
}
//封装总计功能函数
function zongji() {
    var sum=0;
    //获取所有商品
    var uls=content.getElementsByTagName('ul')
    //遍历每个商品对象
    for(var i=0;i<uls.length;i++){
        //获取当前商品中所有的子元素
        var lis=uls[i].children
        //判断当前商品是否被选中
        if(lis[0].firstElementChild.checked){
            //获取当前商品的金额
            var jine=uls[i].children[4].lastElementChild.innerHTML
            //累加
            sum+=parseFloat(jine)
        }
    }
    //把结果赋值给总计
    var lis=footer.getElementsByTagName('li')
    lis[3].lastElementChild.innerHTML=sum.toFixed(2)
}
zongji()

























